<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--3-col-tablet mdl-cell--2-col-phone">
  <base-card class="teal">
    <base-card-title>
      <h2 class="mdl-card__title-text">Teal</h2>
    </base-card-title>
    <base-card-body>
      <h3>#00bcd4</h3>
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--3-col-tablet mdl-cell--2-col-phone">
  <base-card class="red">
    <base-card-title>
      <h2 class="mdl-card__title-text">Red</h2>
    </base-card-title>
    <base-card-body>
      <h3>#f44336</h3>
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--3-col-tablet mdl-cell--2-col-phone">
  <base-card class="green">
    <base-card-title>
      <h2 class="mdl-card__title-text">Green</h2>
    </base-card-title>
    <base-card-body>
      <h3>#00d45a</h3>
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--3-col-tablet mdl-cell--2-col-phone">
  <base-card class="gray">
    <base-card-title>
      <h2 class="mdl-card__title-text">Basic gray</h2>
    </base-card-title>
    <base-card-body>
      <h3>#444747</h3>
    </base-card-body>
  </base-card>
</div>


<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--3-col-tablet mdl-cell--2-col-phone">
  <base-card class="orange">
    <base-card-title>
      <h2 class="mdl-card__title-text">Orange</h2>
    </base-card-title>
    <base-card-body>
      <h3>#ffc107</h3>
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--3-col-tablet mdl-cell--2-col-phone">
  <base-card class="purple">
    <base-card-title>
      <h2 class="mdl-card__title-text">Purple</h2>
    </base-card-title>
    <base-card-body>
      <h3>#7726d3</h3>
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--3-col-tablet mdl-cell--2-col-phone">
  <base-card class="light-blue">
    <base-card-title>
      <h2 class="mdl-card__title-text">Light blue</h2>
    </base-card-title>
    <base-card-body>
      <h3>#03A9F4</h3>
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--3-col-tablet mdl-cell--2-col-phone">
  <base-card class="dark-gray">
    <base-card-title>
      <h2 class="mdl-card__title-text">Dark gray</h2>
    </base-card-title>
    <base-card-body>
      <h3>#333434</h3>
    </base-card-body>
  </base-card>
</div>


<div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">How to use</h2>
    </base-card-title>
    <base-card-body>
      To use any color, you need to use Sass variable naming as the
      corresponding color in lowercase with prefix <code>"color-"</code>.<br>
      If the color name is composed of more than one world, the words are separated by a dash "-".
      <br><br>
      <i class="color-text--teal">Example: You want to use color naming "Teal". Sass variable for this color is <code><b>$color-teal</b></code></i>
    </base-card-body>
  </base-card>
</div>
